<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Tab component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Tab</h1>

            <div class="uk-margin uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-disabled"><a href="#">Disabled</a></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-flip" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-disabled"><a href="#">Disabled</a></li>
                    </ul>

                </div>
            </div>

            <div class="uk-margin uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-2">

                    <div class="uk-tab-center">
                        <ul class="uk-tab" data-uk-tab>
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>

                </div>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-grid" data-uk-tab>
                        <li class="uk-width-1-5 uk-active"><a href="#">Active</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                    </ul>

                </div>
            </div>

            <h2>Bottom</h2>

            <div class="uk-margin uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-bottom" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-disabled"><a href="#">Disabled</a></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-bottom uk-tab-flip" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="uk-disabled"><a href="#">Disabled</a></li>
                    </ul>

                </div>
            </div>

            <div class="uk-margin uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-2">

                    <div class="uk-tab-center uk-tab-center-bottom">
                        <ul class="uk-tab uk-tab-bottom" data-uk-tab>
                            <li class="uk-active"><a href="#">Active</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                            <li><a href="#">Item</a></li>
                        </ul>
                    </div>

                </div>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>
                        <li class="uk-width-1-5 uk-active"><a href="#">Active</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                        <li class="uk-width-1-5"><a href="#">Item</a></li>
                    </ul>

                </div>
            </div>

            <h2>Left/Right</h2>

            <div class="uk-margin uk-grid" data-uk-grid-margin>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-left" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>

                </div>
                <div class="uk-width-medium-1-2">

                    <ul class="uk-tab uk-tab-right" data-uk-tab>
                        <li class="uk-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>

                </div>
            </div>

            <h2>Dropdown</h2>

            <div class="uk-margin">

                <ul class="uk-tab uk-width-medium-1-2" data-uk-tab>
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li data-uk-dropdown="{mode:'click'}">
                        <a href="#">More <i class="uk-icon-caret-down"></i></a>
                        <div class="uk-dropdown uk-dropdown-small">
                            <ul class="uk-nav uk-nav-dropdown">
                                <li><a href="#">Item</a></li>
                                <li><a href="#">Another item</a></li>
                                <li class="uk-nav-header">Header</li>
                                <li><a href="#">Item</a></li>
                                <li><a href="#">Another item</a></li>
                                <li class="uk-nav-divider"></li>
                                <li><a href="#">Separated item</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>

            </div>

        </div>

    </body>
</html>